<template>
  <div class="dialog-Info">
    <!-- 弹窗头 -->
    <div class="dialog-Img">
      <img :src="dialogInfo.poster" alt="" />
      <div class="dialog-imginfo">
        <h3>
          {{ dialogInfo.name }}
          <van-icon size="0.22rem" name="arrow-left" @click="goto" />
        </h3>
        <p>{{ dialogInfo.category?.split('|').join('   ') }}</p>
        <p>
          <span
            v-for="actors in dialogInfo.actors?.slice(1)"
            :key="actors.avatarAddress"
            >{{ actors.name + ' ' }}</span
          >
        </p>
        <p class="van-ellipsis">
          {{
            getLocalTime(dialogInfo.premiereAt * 1000) +
            ' ' +
            dialogInfo.nation +
            ' '
          }}
        </p>
        <p>
          {{
            (dialogInfo.runtime === 0 ? '99' : dialogInfo.runtime) +
            '分钟 ' +
            dialogInfo.language
          }}
        </p>
        <div>
          <van-button size="small" color="hsla(0,0%,100%,.25)" @click="change">
            <van-icon name="like-o" />
            喜欢
          </van-button>
          <van-button size="small" color="hsla(0,0%,100%,.25)" @click="change">
            <van-icon name="star-o" />
            收藏
          </van-button>
        </div>
      </div>
    </div>
    <!-- 评分 -->
    <div class="pingfen">
      <CountTo
        :startVal="num"
        :endVal="dialogInfo.grade - 0"
        count="10"
        :duration="1500"
        :decimals="1"
        class="see place"
      ></CountTo>
      <van-rate
        class="place"
        color="#d9d1be"
        size="0.1rem"
        count="10"
        readonly
        allow-half
        v-model="pingfen"
      />
      <div class="seeout">
        <p><van-icon name="fire-o" color="#b85a54" />猫眼电影</p>

        <p>
          &nbsp;&nbsp;&nbsp;{{ parseInt(dialogInfo.premiereAt / 10000) }}人评分
        </p>
      </div>
    </div>
    <!-- 弹窗简介  -->
    <div class="story">
      <van-row justify="space-between">
        <van-col span="3">简介</van-col>
        <van-col span="4" class="col2" @click="colCut"
          >展开<van-icon :name="overflowLine ? 'arrow-down' : 'arrow-up'" />
        </van-col>
      </van-row>
      <p :class="overflowLine">{{ dialogInfo.synopsis }}</p>
    </div>
    <!-- 弹窗演员  -->
    <div class="actors">
      <van-row justify="space-between">
        <van-col span="10">演职人员</van-col>
      </van-row>
      <div class="actorsList">
        <div
          class="actorsInfo"
          v-for="actors in dialogInfo.actors"
          :key="actors.name"
        >
          <div class="actorsImg">
            <img :src="actors.avatarAddress" alt="" />
            <p>{{ '饰 ' + actors.role }}</p>
          </div>
          <h3 class="van-ellipsis">{{ actors.name }}</h3>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="buy" @click="gotobuy">
        <van-icon name="send-gift-o" />特惠买票
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, reactive, ref } from 'vue'
import { useStore } from 'vuex'
import { CountTo } from 'vue3-count-to'
import { useRouter } from 'vue-router'
const store = useStore()
const router = useRouter()
//初始化
let dialogInfo = reactive({})
let pingfen = ref()
onMounted(() => {
  //隐藏 tabbar
  store.commit('movieData/tabbarCut', false)
  dialogInfo = Object.assign(dialogInfo, store.state.movieData.movieInfo)
  console.log(store.state.movieData.tabbar)
  console.log(2)
  pingfen.value = Number(store.state.movieData.movieInfo.grade)
  document.body.style.background = '#202d50'
})
onBeforeUnmount(() => {
  store.commit('movieData/tabbarCut', true)
  overflowLine.value = 'van-multi-ellipsis--l3'
  document.body.style.background = 'none'
})
//按钮变化
const change = (event) => {
  if (event.target.style.background === 'rgba(255, 255, 255, 0.25)') {
    event.target.style.background = 'rgb(251 38 38)'
  } else {
    event.target.style.background = 'rgba(255, 255, 255, 0.25)'
  }
}
//返回
const goto = () => {
  // console.log(router.back())
  router.back()
}
//买票
const gotobuy = () => {
  console.log(dialogInfo.filmId)
  router.push({
    name: 'cinemafind',
    params: {
      id: dialogInfo.filmId
    },
    query: {
      name: dialogInfo.name,
      imgUrl: dialogInfo.poster
    }
  })
}
//点击事件
const colCut = () => {
  overflowLine.value
    ? (overflowLine.value = '')
    : (overflowLine.value = 'van-multi-ellipsis--l3')
}
const overflowLine = ref('van-multi-ellipsis--l3')
//数字动画效果初始值=====
let num = ref(0)

//时间戳
const getLocalTime = (n) => {
  let now = new Date(n),
    y = now.getFullYear(),
    m = now.getMonth() + 1,
    d = now.getDate()
  return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d)
}
</script>

<style lang="scss" scoped>
.dialog-Info {
  background-color: #202d50;
  padding: 0.22rem;
  color: #fff;
  display: flex;
  flex-direction: column;

  .dialog-Img {
    display: flex;
    height: 1.7rem;
    margin-top: 0.15rem;
    img {
      height: 100%;
    }
    .dialog-imginfo {
      flex: 1;
      margin-left: 0.14rem;
      display: flex;
      flex-direction: column;
      h3 {
        margin-bottom: 0.1rem;
        display: flex;
        justify-content: space-between;
      }
      p {
        opacity: 0.6;
        font-size: 0.14rem;
        line-height: 0.24rem;
      }
      div {
        margin-top: 0.08rem;
        display: flex;

        .van-button {
          // background: rgb(255 51 51 / 90%);
          width: 0.8rem;
          margin-right: 0.25rem;
          transition: 0.5s;
        }
      }
    }
  }
  .pingfen {
    margin-top: 0.2rem;
    background-color: rgba(0, 0, 0, 0.18);
    border-radius: 0.16rem;
    flex: 1;
    text-align: center;
    font-size: 0.14rem;
    display: flex;
    justify-content: center;
    align-items: center;
    // height: 1rem;
    position: relative;
    .place {
      margin-top: 0.4rem;
      margin-bottom: 0.15rem;
    }
    .see {
      color: #ffb400;
      font-weight: 600;
      font-family: MaoYanHeiTi-H-H;
      font-size: 0.22rem;
      align-self: center;
      opacity: 1;
      margin-right: 0.1rem;
    }
    .seeout {
      width: 100%;
      position: absolute;
      top: 0.18rem;
      display: flex;
      justify-content: space-between;
      .van-icon {
        margin-right: 0.05rem;
      }
      p {
        padding: 0 0.14rem;
        opacity: 0.7;
      }
    }
  }
  .story {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    font-size: 0.14rem;
    .van-col {
      text-align: center;
    }
    .col2 {
      opacity: 0.6;
    }
    p {
      margin-top: 0.1rem;
      padding-left: 0.05rem;
      line-height: 0.24rem;
    }
  }
  .actors {
    font-size: 0.14rem;
    .actorsList {
      overflow: scroll;
      display: flex;
      margin-top: 0.14rem;
      .actorsInfo {
        margin-right: 0.1rem;
        h3 {
          text-align: center;
          font-weight: 400;
          font-size: 0.16rem;
          opacity: 0.8;
        }
      }
      .actorsImg {
        width: 1rem;
        height: 1.45rem;
        position: relative;
        margin-bottom: 0.1rem;

        img {
          width: 100%;
          height: 100%;
        }
        p {
          position: absolute;
          bottom: 0rem;
          color: #faaf00;
          font-size: 0.14rem;
          font-weight: 600;
          width: 100%;
          height: 0.35rem;
          background-image: linear-gradient(-180deg, rgba(77, 77, 77, 0), #000);
          text-align: center;
          box-sizing: border-box;
          padding-top: 0.15rem;
        }
      }
    }
  }
  .bottom {
    height: 0.5rem;
    .buy {
      height: 0.5rem;
      background: linear-gradient(to right, #f47a58, #f21a33);
      position: fixed;
      width: 100%;
      left: 0;
      bottom: 0;
      text-align: center;
      line-height: 0.5rem;
      font-size: 0.2rem;
      color: #f5f5f5;
      .van-icon {
        margin-right: 0.1rem;
      }
    }
  }
}

//滚动条
::-webkit-scrollbar {
  display: none;
}
</style>
<style>
:root {
  --van-button-small-height: 0.3rem;
}
</style>
